// Todo list
.todo
  background-color: scale-color($base, $lightness: -15%)
  border-radius: 8px 8px 6px 6px
  color: scale-color($base, $lightness: 33%)
  margin-bottom: 20px

  ul
    margin: 0
    list-style-type: none

  li
    background: $base url('../images/todo/todo.png') 92% center no-repeat
    background-size: 20px 20px
    cursor: pointer
    margin-top: 2px
    padding: 18px 42px 17px 25px
    position: relative
    +transition(.25s)
    &:first-child
      margin-top: 0
    &:last-child
      border-radius: 0 0 6px 6px
      padding-bottom: 18px
    &.todo-done
      background: transparent url('../images/todo/done.png') 92% center no-repeat
      background-size: 20px 20px
      color: $firm

      .todo-name
        color: $firm

.todo-search
  background: $firm url('../images/todo/search.png') 92% center no-repeat
  background-size: 16px 16px
  border-radius: 6px 6px 0 0
  color: $base
  padding: 19px 25px 20px

input.todo-search-field
  background: none
  border: none
  color: $base
  font-size: 19px
  font-weight: 700
  margin: 0
  line-height: 23px
  padding: 5px 0
  text-indent: 0
  +box-shadow(none)
  +placeholder-color($base)

.todo-icon
  float: left
  font-size: 24px
  padding: 11px 22px 0 0

.todo-content
  padding-top: 1px
  overflow: hidden

.todo-name
  color: $inverse
  font-size: 17px
  margin: 1px 0 3px

// Serving 2x images
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2)
  .todo
    li
      background-image: ('../images/todo/todo-2x.png')
      &.todo-done
        background-image: ('../images/todo/done-2x.png')

  .todo-search
    background-image: ('../images/todo/search-2x.png')

